// 导入useState
import {useState,useEffect} from 'react'
import {GetRole,AddRole,PutRole} from '@/api/index'
import {Pagination,Button,message} from 'antd'
import EditRole from './components/EditRole'
 

function RoleView() {
  const [messageApi,contextHolder] = message.useMessage();
  // 角色列表
  const [roleList,setRoleList] = useState([])
  // 被修改的角色（被添加）
  const [role,setRole]  = useState([])
  // 是否打开弹框
  const [isOpen,setIsOpen] = useState(false)
  // 是否为添加
  const [isAdd,setIsAdd] = useState(false);
  // 分页信息
  const [pagination,setPagination] = useState({size:4,current:1,order:'asc'})
  // 获取角色列表
  function getRoleList(){
    GetRole({...pagination})
    .then(res=>{
      if(res.data.code===0){
        // 缓存分页变量
        const p = res.data.pagination;
        // 更新角色列表
        setRoleList(res.data.data);
        // 更新分页信息
        setPagination({...pagination,total:p.total,current:p.current})
      }
    })
  }
  // 当current发生变化获取角色列表
  useEffect(()=>{
    getRoleList();
  },[pagination.current])

  function onOk (e){
      // 修改角色
    if(isAdd){
      // 添加角色
      AddRole(e)
      .then(res=>{
        if(res.data.code==0){
          messageApi.success('添加成功');
        }
      })
    }else{
      PutRole(e)
      .then(res=>{
        if(res.data.code==0){
          messageApi.success('修改成功');
        }
      }) 
    }
    // 添加修改完毕，isAdd设置为false，关闭弹框
    setIsAdd(false);
    setIsOpen(false);
  }
  return ( <div>
    <h3>角色管理</h3>
    {contextHolder}
    <Button 
    type='primary'
    onClick={()=>{
      setRole({...role,permission:''})
      setIsAdd(true);
      setIsOpen(true);
    }}>添加角色</Button>
    {
      roleList.map(item=><div key={item.id}>
        <p>名称：{item.name}</p>
        <p>
          <button onClick={()=>{
            setIsAdd(false);
            setIsOpen(true);
            setRole(item);
          }}>修改</button>
          <button>删除</button>
        </p>
        
      </div>)
    }
    <Pagination 
    pageSize={pagination.size}
    current={pagination.current} 
    onChange={e=>{
      // 更新分页（触发重新请求角色）
      setPagination({...pagination,current:e})
    }} 
    total={pagination.total} 
    />
    
    <EditRole 
    onOk={onOk}
    onCancel={()=>setIsOpen(false)}
    isOpen={isOpen}
    data={role}
    title={isAdd?'添加角色':'修改角色'}></EditRole>
  </div> );
}

export default RoleView;